<!-- 时间起止 -->
<template>
  <div style='display:inline-block'>
    <el-col :span="11">
      <el-date-picker
        :type="timeType"
        :placeholder="timeDes.startDes"
        v-model="vtimeStart"
        :picker-options="reportStartLimit"
        :value-format="valueFormat"
        style="width: 100%;"
        @change="timeChange('timeStart')"
      ></el-date-picker>
    </el-col>
    <el-col class="line" :span="2" style="text-align:center">至</el-col>
    <el-col :span="11">
      <el-date-picker
        :type="timeType"
        :placeholder="timeDes.EndDes"
        v-model="vtimeEnd"
        :picker-options="reportEndLimit"
        :value-format="valueFormat"
        style="width: 100%;"
        @change="timeChange('timeEnd')"
      ></el-date-picker>
    </el-col>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: [Array, String],
      default: "选择日期"
    },
    timeType: {
      type: String,
      default: "date"
    },
    timeStart: {
      required: true
    },
    timeEnd: {
      required: true
    }
  },
  components: {},
  data() {
    return {
      reportStartLimit: {
        disabledDate: time => {
          if (this.vtimeEnd) {
            return time.getTime() >= new Date(this.vtimeEnd).getTime();
          }
        }
      },
      reportEndLimit: {
        disabledDate: time => {
          if (this.vtimeStart) {
            return time.getTime() <= new Date(this.vtimeStart).getTime();
          }
        }
      },
      vtimeStart: null,
      vtimeEnd: null
    };
  },
  computed: {
    valueFormat() {
      switch (this.timeType) {
        case "date":
          return "yyyy-MM-dd";
          break;
        case "month":
          return "yyyy-MM";
          break;
        case "year":
          return "yyyy";
          break;
        default:
          break;
      }
    },
    timeDes() {
      let datatype = this.$utils.getDatatype(this.placeholder);
      return {
        startDes: datatype === "Array" ? this.placeholder[0] : this.placeholder,
        EndDes: datatype === "Array" ? this.placeholder[1] : this.placeholder
      };
    }
  },
   watch: {
      timeStart: {
        handler(newVal) {
          this.vtimeStart = this.timeStart;
        },
        immediate: true
      },
      timeEnd: {
        handler(newVal) {
          this.vtimeEnd = this.timeEnd;
        },
        immediate: true
      }
    },
  methods: {
    timeChange(time) {
      this.$emit(`update:${time}`, this['v'+time]);
    }
  }
};
</script>
<style lang="scss" scoped></style>
